<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>
    <!--
        boostrap提供的表格全局样式
        class="table"   默认样式
        class="table-stripe" 斑马条纹样式
        class="table-bordered" 带边框的表格
        class="table-hover"鼠标悬浮有颜色标记
        class="table-condensed"紧缩表格
    -->
</head>
<body>
<!--响应式表格
     class="table-responsive"
-->
<div  class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed" >
        <tr>
            <th>用户名称</th>
            <th>网名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <!--
            表格样式里面提供状态的属性:
            class="info/danger/sucess/..."
        -->
        <tr class="danger">
            <td>高圆圆</td>
            <td>杨桃</td>
            <td>42</td>
            <td>女</td>
            <td>西安市</td>
        </tr>
        <tr class="info">
            <td>高圆圆2</td>
            <td>杨桃2</td>
            <td>30</td>
            <td>女</td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>文章</td>
            <td>撒谎大师</td>
            <td>42</td>
            <td>男</td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>高圆圆</td>
            <td>杨桃</td>
            <td>42</td>
            <td>女</td>
            <td>西安市</td>
        </tr>

    </table>
</div>

</body>
</html>